import React, { Component, useRef, useState, useEffect } from 'react';
import styles from './index.less';
import cls from 'classnames';
import { SearchOutlined, LoadingOutlined } from '@ant-design/icons';
import useHome from '@/components/widgets/Home/useHome';
import useZoom from '@/components/widgets/Zoom/useZoom';
import useCompass from '@/components/widgets/Compass/useCompass';
import useNavigationToggle from '@/components/widgets/NavigationToggle/useNavigationToggle';
import { connect } from 'umi';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
// import { jsapi, viewUtils } from '@/utils/arcgis';

// 地图相关的操作bar 企业级面板无法服用
const TopToolbar = ({ isFullScreen, dispatch, isGlobalProcessRender, compareState }) => {
  const compassRef = useRef();
  const [isLoading, homeReset] = useHome();
  const [_isLoading1, zoomIn, zoomOut] = useZoom();
  const [_isLoading2, compassReset] = useCompass(compassRef);
  const [navigationStatus, pan, rotate, naviToggle] = useNavigationToggle();
  const [mapOpacity, setMapOpacity] = useState(100);

  let EyeOutLine = mapOpacity ? EyeOutlined : EyeInvisibleOutlined;

  function handleFullScreenToggle() {
    dispatch({
      type: 'app/updateState',
      payload: {
        isFullScreen: !isFullScreen,
      },
    });
  }

  useEffect(() => {
    let curOpacity = mapOpacity / 100;
    try {
      window.agsGlobal.view.map.ground.opacity = curOpacity;
      window.agsGlobal.view.map.basemap.baseLayers.items[0].opacity = curOpacity;
      const lyr = window.agsGlobal.view.map.layers.find(l => l.title === 'googleLayer');
      lyr.opacity = curOpacity;
    } catch (error) {}
    try {
      window.agsGlobal2.view.map.ground.opacity = curOpacity;
      window.agsGlobal2.view.map.basemap.baseLayers.items[0].opacity = curOpacity;
      const lyr = window.agsGlobal2.view.map.layers.find(l => l.title === 'googleLayer');
      lyr.opacity = curOpacity;
    } catch (error) {}
  }, [mapOpacity, compareState]);

  function renderMapTools() {
    return (
      <div
        className={cls(styles.mapTools, {
          [styles.mapToolsMore]: isGlobalProcessRender,
        })}
      >
        <div className={styles.mapToolsWrap}>
          {isLoading &&
            Array(6)
              .fill(1)
              .map((e, i) => (
                <div
                  className={styles.mapToolsItem}
                  key={i}
                  // @ts-ignore
                >
                  <LoadingOutlined key={i} />
                </div>
              ))}

          {!isLoading && (
            <>
              <div
                title="罗盘"
                onClick={compassReset}
                className={styles.mapToolsItem}
                // @ts-ignore
              >
                <img ref={compassRef} src={require('./images/指南针.png')} />
              </div>
              <div
                title={isFullScreen ? '取消全屏' : '地图全屏'}
                onClick={handleFullScreenToggle}
                className={styles.mapToolsItem}
              >
                <img src={require('./images/全屏.png')} />
              </div>
              <div title="旋转" onClick={naviToggle} className={styles.mapToolsItem}>
                <img src={require('./images/循环.png')} />
              </div>

              <div title="home" onClick={homeReset} className={styles.mapToolsItem}>
                <img src={require('./images/初识视角.png')} />
              </div>

              <div
                title="放大"
                onClick={zoomIn}
                style={{
                  marginBottom: 0,
                }}
                className={styles.mapToolsItem}
              >
                <img src={require('./images/放大.png')} />
              </div>
              <div
                title="缩小"
                style={{
                  marginBottom: 0,
                }}
                onClick={zoomOut}
                className={styles.mapToolsItem}
              >
                <img src={require('./images/缩小.png')} />
              </div>

              {/* {isGlobalProcessRender && (
                <EyeOutLine
                  className={cls(styles.mapToolsItem, { [styles.mapToolsItemO]: mapOpacity == 50 })}
                  onClick={() =>
                    setMapOpacity(e => {
                      let r = e - 50;
                      return r < 0 ? 100 : r;
                    })
                  }
                  title="切换底图透明度"
                />
              )} */}
            </>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className={styles.topToolbar}>
      <div className={styles.topToolbarL}>
        {/* 地图工具 */}
        {renderMapTools()}
      </div>
    </div>
  );
};

// export default topToolbar;
// @ts-ignore
export default connect(({ app, bimmodel }) => {
  return {
    isFullScreen: app.isFullScreen,
    isGlobalProcessRender: app.isGlobalProcessRender,
    compareState: bimmodel.compareState,
  };
})(TopToolbar);
